<%@ page language="java"  pageEncoding="UTF-8" errorPage="../error.jsp"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<%
	pageContext.setAttribute("ctx", request.getContextPath());	
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet"  type="text/css" href="${ctx}/css/default.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/icon.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/locale/easyui-lang-zh_TW.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/IPEBG.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/COMMON.js"></script>
<script type="text/javascript">
    var ctx = '${ctx}';
    jQuery(document).ready(function(){
        $("table[id=tableShow]").show();
		$('#qryGrid').datagrid({
			title:'用户列表',
			nowrap: false,
			striped: true,
			fitColumns: true,
			url: ctx + '/user.do?action=list',
			remoteSort: false,
			//idField:'typeCode',
			singleSelect:true,
			rownumbers:true,
			frozenColumns:[[
			    {field:'ck',checkbox:true,width:30},
				{field:'userId',title:'Id',width:50,hidden: true},
				{field:'orgId',title:'orgId',width:100,hidden: true}
			]],
			columns:[[	
				{field:'loginName',title:'工號',width:100},
				{field:'realName',title:'姓名',width:100},
				{field:'orgName',title:'部門',width:100},
				{field:'dominate',title:'廠區',width:100,
				    formatter:function(value,rowdata,index) {
				    	if(value=='ZZK') {
				    		return "鄭州綜保區";
				    	}else if(value=='ZZC'){
				    		return "鄭州加工區";
				    	}else if(value=='JYX'){
				    		return "濟源廠區";
				    	}else if(value=='JCX'){
				    		return "晉城廠區";
				    	}else if(value=='LHX'){
				    		return "龍華廠區";
				    	}else if(value=='GLX'){
				    		return "觀瀾廠區";
				    	}else if(value=='HBX'){
				    		return "鶴壁廠區";
				    	}else if(value=='NH'){
							return "內湖廠區";
						}
				    }},
				{field:'email',title:'Email地址',width:200},
				{field:'enabled',title:'狀態',width:50,
				   	formatter:function(value,rowdata,index) {
				   		if(value=='0') {
				   			return "<font color='red'>不可用</font>";
				   		}else if(value=='1') {
				   			return "可用";
				   		}
				   	}}
			]],
			pagination:true,
			pageSize:10,
			pageNumber:1,
			pageList:[10,20,30],
			onSelect:select
		});
		var p = $('#qryGrid').datagrid('getPager');
		if (p){
			$(p).pagination({
				onBeforeRefresh:function(){
					;
				}
			});
		}
	    
		$('#submit').click(function() {
		    
		});
		
	});
	
	//查詢方法
	function query(){
		var loginName = $("#s_jobNo").val();
		var realName = $("#s_realName").val();
		var param = {
				"loginName" : loginName,
				"realName" : realName
			};	
		$('#qryGrid').datagrid('load',param);	
	}
	
	function adddo(){
		var $options = $('#allrole option:selected');
		$options.appendTo('#emprole');
	}
		
	function removedo(){
		var $options = $('#emprole option:selected');
		$options.appendTo('#allrole');
	}
	
	function select(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){  
			var $options = $('#emprole option');
            $options.appendTo('#allrole');
			$("#emprole option").remove();
             
		    var params = {"userId" :  selected.userId};

			$.ajax({
				type:'post',
				url :ctx + '/userrole.do?action=getRoles',
				data :params,
				datatype :'json',
				cache : false,
				error : function(textStatus, errorThrown) {
					$.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
				},
				success : function(data, textStatus){
					var str="";
					var data2 = $.parseJSON(data);  
					for(var key in data2) {
						var k = parseInt(key);
						var level = data2[k];
						str = str+ "<option value='"+level.roleId+"'>" +level.roleName+ "</option> " ;
			            $('#allrole option').each(function(j,opt){
			            	if($(this).val()==level.roleId){
			                	$(this).remove();
			                }
						});
					}
					$('#emprole').append(str);
				}
			});
		}
	}
	//保存用户角色
	function doupdate(){
		var selected = $('#qryGrid').datagrid('getSelected');
		var options = document.getElementById("emprole").options;
		var roles="";
		$.each(options, function(i,item){
			roles= roles + item.value+",";
		});
		var params = {
				"userId" : selected.userId,
				"roles" : roles
			};
		if(selected){  
			$.ajax({
				type: "post",
                url: ctx + '/userrole.do?action=saveRoles',
                data: params,
                dataType : "text",
				cache : false,
				error : function(textStatus, errorThrown) {
					  $.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
				},
                success: function(data, textStatus){
                	if(data == "success")
                		$.messager.alert('系統提示','保存角色成功！','info');
                	else
                		$.messager.alert('系統提示','保存角色失敗！','info');
                }
            }); 
        } 
	}
</script>
</head> 
<body>    
    <div style="width:70%;float:left;" region="center" split="true">
	    <table id="qryGrid" toolbar="#tb"></table>
		<div id="tb">
			<form action="" id="tbFormId" style="margin-top:10px;margin-bottom:10px;">
			<table width="100%" id="tableShow" style="display:none;">
				<tr>
					<td width="40%" style="white-space:nowrap;padding:0px" align="left">
						<span style="font-size:13px;">工號:</span>
						<input type="text" id="s_jobNo" />
										
						<span style="font-size:13px;">姓名:</span>
						<input type="text" id="s_realName" />
						<a class="easyui-linkbutton" iconCls="icon-search" plain="true" href="#" code="query" onclick="query()">查询</a>
					</td>
				</tr>
			</table>
			</form>
		</div>
	</div>
	<div region="east" title="用戶角色設置" split="true" style="width: 30%; float: left;" align="center">
		<table style="font-size:13px;background-color:#E0ECFF;border:1px solid #95B8E7;">
			<tr>
				<th align="center" style="background-color: green; padding: 5px;">已分配角色</th>
				<th align="center"><操作></th>
				<th align="center" style="background-color: darkgrey;">未分配角色</th>
			</tr>
			<tr>
				<td align="center">
					<select multiple="multiple" size="20" style="width: 180px; height: 340px;font-family: Microsoft JhengHei,Microsoft YaHei,Arial, Helvetica, sans-serif;" id="emprole">

					</select>
				</td>
				<td align="center">
					<input type="button" value="<添加" style="width:60px;font-family: Microsoft JhengHei,Microsoft YaHei,Arial, Helvetica, sans-serif;" code="Add" onclick="adddo()"> <br><br><br><br><br> 
					<input type="button" value="移除>" style="width:60px;font-family: Microsoft JhengHei,Microsoft YaHei,Arial, Helvetica, sans-serif;" code="Delete" onclick="removedo()">
				</td>
				<td align="center">
					<select multiple="multiple" size="20" style="width:180px;height:340px;font-family: Microsoft JhengHei,Microsoft YaHei,Arial, Helvetica, sans-serif;" id="allrole">
						<c:forEach var="list" items="${roleList}">
							<option value="${list.roleId}">${list.roleName}</option>
						</c:forEach>
					</select>
				</td>
			</tr>
		</table>
		<br/>
		<input type="button" value="確  定" style="width:60px;font-family: Microsoft JhengHei,Microsoft YaHei,Arial, Helvetica, sans-serif;" code="Ok" onclick="doupdate()">
	</div>
</body>
</html>